<!-- 记事本修改 -->
<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outs"></i>
				<span slot="center-slot">{{title}}</span>
				<i  slot="right-slot" >
					<i class="iconfont icon-youcecaidan" style="font-size: 25px;padding-left: 15px;" @click="bubble"></i>
				</i>
			</navitop>
		</div>
		<div :style="'margin-top:' + nv_height " class="eve_add">
			<div class="eve_out">
				<div class="eve_title">
					<input placeholder="标题" v-model="detl_data.title" />
				</div>
				<div class="eve_class" @click="class_bottom">
					<div v-if="detl_data.contentType">{{detl_data.contentTypes}}</div>
					<div v-else>未分类</div>
				</div>
				<div>
					<!-- <div class="textarea" contenteditable="true" ref="textare">{{detl_data.content}}</div> -->
					<textarea v-model="detl_data.content" class="texttar_style" auto-height placeholder="内容" />
				</div>
			</div>
			<div class="bottom_style" @click="list_save">
				<text>保&nbsp;存</text>
			</div>
		</div>
		<!-- 气泡弹窗 -->
		 <chunLei-popups v-model="value" :popData="data" @tapPopup="tapPopup" :x="345" :y="95" placement="top-end">
		 </chunLei-popups>
		 
		 
		 <popus ref="alert">
		 	<div class="alert_out">
		 		<div class="alert_top">
		 			<div class="alert_left"></div>
		 			<div class="alert_right" @click="class_add"><i class="iconfont icon-jiahao" style="padding: 0 8px 0 0" ></i>新建分类</div>
		 		</div>
		 		<div class="alert_class">
		 			<scroll-view class="staff_b" scroll-y="true" touch-action=auto; >
		 				<div class="alert_list" v-for="(item,index) in dataSorce_class" @click="select_data(item)">
		 					{{item.dictValue}}
		 				</div>
		 			</scroll-view>	
		 		</div>
		 	</div>
		 </popus>
		 
		 
		 <popus ref="alert_center">
		 	<div class="alert_center_out" :style="'width:' + al_width">
		 		<div><h3>新建分类</h3></div>
		 		<div class="alert_center_int"><input v-model="dictValue"></div>
		 		<div class="bottom">
		 			<div class="bottom_op" @click="close_center">取消</div>
		 			<div class="bottom_op" @click="close_ok">确定</div>
		 		</div>
		 	</div>
		 </popus>
	</view>
</template>

<script>
	import navitop from '@/components/common/navi-top'
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups";
	import {pageList,dictpage,persave,perdel,saveUpdate} from '@/common/api/my/myapi.js'
	import {dictType} from '@/common/api/table.js'
	export default {
		components:{
			navitop,
			chunLeiPopups,
			popus
		},
		props:{
			id: ''
		},
		data(){
			return {
				title: '',
				nv_height: '',
				dataSorce: '',
				dataSorce_class: '',
				na_class: {},
				al_width: '',
				data: [		// 气泡弹窗数据
					{title:'删除',code:'del',icon:'icon-shanchu'},
				],
				data_list: [],
				value: false,
				titles: '',	 // 标题
				content: '',	// 输入类容
				contentType:'',	// 分类
				uid: ''	,// 用户id
				data_id: '',
				detl_data:{},
				
				contentType_name:'',	// 分类显示
				newDataList: {},
				
			}
		},
		onLoad(option) {
			this.title = option.title;
			
			this.data_id = option.id;
		},
		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			
			this.uid = uni.getStorageSync('userInfo').userId;
			
			this.al_width = uni.getSystemInfoSync().screenWidth - 40 + 'px'
			
			this.zd_list();
			
		},
		methods:{
			// 返回
			outs(){
				uni.navigateTo({
					url: '/pages/common/my/subpage/evaluate/evaluate?title=记事本'
				})
			},
			
			// 底部分类弹窗
			class_bottom(){
				this.$refs.alert.open('bottom')
			},
			
			// 分类新建
			class_add(){
				this.$refs.alert.close();
				this.$refs.alert_center.open('center');
				
			},
			
			close_center(){
				this.$refs.alert_center.close();
			},
			
			// 选中弹窗类容
			select_data(val){
				
				this.detl_data.contentType = val.id;
				this.detl_data.contentTypes = val.dictValue;
				console.log(this.detl_data,'--------',val)
				// this.contentType = val.id;
				// this.contentType_name = val.dictValue;
				this.$refs.alert.close();
			},
			
			close_ok(){
				let _this = this;
				let updata ={};
				if(!this.dictValue){
					uni.showToast({
						title: '请输入分类名称',
						icon: 'none'
					})
					return false;
				}
				uni.showLoading({
					title: '保存中...'
				})
				updata['companyId'] = 1;
				updata['createBy'] = 1;
				updata['description'] = null;
				updata['dictCode'] = "person_note";
				updata['dictLabel'] = Number(this.newDataList[0].dictLabel) + 1;
				updata['dictName'] = "记事本";
				updata['dictType'] = 1;
				updata['dictTypeId'] = 108;
				updata['dictValue'] = this.dictValue;
				updata['isDefault'] = true;
				updata['isSys'] = true;
				updata['showSort'] = this.newDataList[0].showSort + 1;
				updata['status'] = 0;
				updata['updateBy'] = 1;
				updata['moduleType'] = "SCM";
				updata['key'] = 116;
				updata['isUpdate'] = false;
				saveUpdate(updata).then(item => {
					if(item.code == 200){
						uni.hideLoading();
						this.$refs.alert_center.close();
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						setTimeout( ()=> {
							_this.zd_list();
						},1500)
					}
				})
			},
			
			
			// 打开气泡弹窗
			bubble(){
				this.value = !this.value;
			},
			
			// 删除
			tapPopup(val){
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除吗？',
				    success: function (res) {
				        if (res.confirm) {
				           perdel([_this.data_id]).then((rows) => {
								if(rows.code == 200){
									uni.showToast({
										title: '删除成功'
									})
									setTimeout(()=>{
										this.outs();
									},1500)
								}
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			
			},
			
			// 获取详情信息
			page_List(){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				pageList({'type': 2}).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						rows.data.records.filter(function(item) {
							if(_this.data_id == item.id) {
								_this.detl_data = item;
							}
						})
						this.dataSorce.filter(function(item){
							if(item.id == _this.detl_data.contentType){
								_this.detl_data.contentTypes = item.dictValue;
							}
						})
					}
				})
			},
			
			// 获取分类列表
			zd_list(){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				dictType().then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						rows.data.records.filter(function(item) {
							if(item.dictCode === "person_note"){
								_this.na_class = item;
							}
						})
					}
					dictpage({'page.size':-1,'dictTypeId':_this.na_class.id}).then((rst) => {
						if(rst.code == 200){
							this.dataSorce = rst.data.records;
							this.page_List();
							rst.data.records.filter(function(item){
								_this.data_list.push(item.dictValue)
							})
							
							this.dataSorce_class = rst.data.records;
							this.dataSorce_class.unshift({dictValue: '未分类',id: ''})
							this.newDataList = this.dataSorce.slice(-1);
						}
					})
				})
			},
			
			// 保存
			list_save(){
				uni.showLoading({
					title: '加载中...'
				})
				delete this.detl_data.createDate
				persave(this.detl_data).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						setTimeout(()=>{
							this.outs();
						},1500)
					}
				})
			},
			
			// 区分类型
			class_value(val){
				let _this = this;
				this.dataSorce.filter(function(item) {
					if(item.dictValue == val){
						_this.contentType = item.id
					}
				}) 
			}
			
		}
	}
	
</script>

<style scoped lang="scss">
	
	
	// 中间弹窗
	.alert_center_out {
		background: #fff;
		border-radius: 4px;
		padding: 30px 0 20px 0;
		div {
			margin-left: 20px;
		}
	}	
	
	.bottom {
		padding: 20px 0 10px 150px;
		display: flex;
	}
	
	.alert_center_int {
		padding: 10px 0 10px 0;
		input {
			border: 0;
			border-bottom: 1px solid #2283E4;
			border-radius: 0;
			width: 90%;
		}
	}
	
	.bottom_op {
		color: #2283E4;
		width: 30%;
		text-align: center;
		padding: 5px 0 0 0;
	}
		
	// 底部弹窗
	.alert_out {
		height: 400px;
		background-color: #fff;
		
	}	
	
	.alert_top {
		height: 40px;
		line-height: 40px;
		display: flex;
		border-bottom: 1px solid #f0f0f0f0;
		justify-content: space-between;
		.alert_left {
			width: 30%;
			text-align: center;
		}
		.alert_right {
			width: 30%;
			text-align: center;
			padding: 0 10px 0 0;
			color: #2283E4;
		}
	}
	
	.alert_class {
		height: 355px;
	}
	
	.staff_b {
		 height: 100%;
	}
	
	.alert_list {
		height: 40px;
		line-height: 40px;
		padding: 0 0 0 20px;
	}
.eve_add {
	width: 100%;
	.eve_out {
		background-color: #fff;
		width: 95%;
		margin: auto;
		div {
			line-height: 60rpx;
			padding:  0 0 0 30rpx;
		}
		.eve_title {
			height: 90rpx;
			line-height: 90rpx;
			input {
				height: 90rpx;
				font-size: 25px;
				border: 0;
				width: 90%;
			}
		}
		.eve_list {
			padding: 0 0 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
		.eve_class {
			width: 90%;
			margin: auto;
			color: grey;
		}
	}
	
}
.bottom_style {
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 25px;
	color: #fff;
	background-color: rgb(34, 131, 228);
}


.textarea{
			width: 90%;
			min-height: 200px;
			_height: 120px;
			margin-left: auto;
			margin-right: auto;
			padding: 3px;
			outline: 0;
			font-size: 12px;
			line-height: 24px;
			word-wrap: break-word;
			overflow-x: hidden;
			overflow-y: auto;
			margin-top: 10px;
			margin-bottom: 10px;
			border-radius: 4px;
			border: 1px solid #cacaca;
		}
		
		.texttar_style {
			min-height: 200px;
			margin: 10px 0 10px 0;
		}
		
</style>
